<template>
  <div class="zong">
    <div id="zh"></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";
export default {
  setup() {
      
    let { ctx } = getCurrentInstance();
    //坐标轴及数据
    let x = [],
      zhiData = [],
      weiData = [],
      othData = [],
      totData = [];
    onMounted(() => {
      chart();

    });
    let chart = async () => {
      var myChart = echarts.init(document.getElementById("zh"));
      var option = {
        //------------标题样式---------------
        title: {
          text: "消费统计图表",
          show:'true',
          left:'48%',
          top:'0px',
          textStyle:{
              color:'#fff',
              align:'center',
              baseline:"top",
              fontFamily:"楷体",
              fontSize:20
          }
        },
        //--------------绘图区-------------
        grid:{
            left:'40px',
            top:'30px',
            right:'40px',
            bottom:'50px',
            width:'auto',
            height:'auto',

        },
        //------------浮框区---------------
        tooltip: {
          show:"true",
          trigger: "axis",
          borderColor:'#666',
          backgroundColor:'#666',
          textStyle:{
              color:'#fff',
              align:'left',
              baseline:"top",
              fontSize:'14'
          },
          axisPointer:{
              type:'line',
              lineStyle:{
                  color:'#a5bef0'
              }
          }
        },
        //--------背景-------
        backgroundColor:'rgba(36,52,136,0.5)',
        //--------图例---------
        legend: {
          show:'true',
          type:'scroll',
          left:'center',
          right:'auto',
          bottom:'2px',
          itemWidth:20,
          itemHeight:10,
          zlevel:10,
          textStyle:{
              color:'#fff',
              fontSize:12,
          },
          data: ["消费总量", "支付宝消费", "微信消费", "其他消费"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        //-------X轴----------------
        xAxis: {
          show:true,
          type: "category",
          boundaryGap: true,
          name:'月份',
          nameGap:15,
          nameStyle:{
              color:'#fff',
              fontSize:12
          },
          nameLocation:'end',
          //数值样式
          axisLabel:{
            //   formatter:function(val){return xxx} //手动设置x轴下标
            textStyle:{
                color:'#fff',
                fontSize:14
            }
          },
        //  min:function(){return 0}, //x轴最小值
        //  max:function(){return 200}, //最大值
          data: [],
        },
        //---------y轴 同x轴--------------
        yAxis: {
          type: "value",
          splitNumber:5,
          splitLine:{
              show:true
          },
          axisLabel:{
              textStyle:{
                  color:'#fff'
              }
          }

        },
        dataZoom:[{
            //x轴显示区域
            type:'slider',
            show:false,
            showDetail:true,
            realtime:true,
            start:0,
            end:100,
            top:'bottom'
        }],

        series:  [
          {
            name: "消费总量",
            type: "line",
            // stack:'总量',
            data: totData,
            index:0
          },
          {
            name: "支付宝消费",
            type: "bar",
            data: zhiData,
            barWidth:14,
            index:0,
            label:{
                normal:{
                    show:false,
                    position:'top',
                    textStyle:{
                        color:'#333',
                        fontSize:12
                    }
                }
            }
          },
          {
            name: "微信消费",
            type: "bar",
            data: weiData,
            barWidth:14
          },
          {
            name: "其他消费",
            type: "bar",
            data: othData,
            barWidth:14
          }
        ]
      };
      //获取数据

      let res = await ctx.$axios.get("/bill");
      if (res.status == 200) {
        let rdata = res.data;
        localStorage.setItem('billData',JSON.stringify(rdata))
        for (let item of rdata) {
          //X轴
          x.push(item.month);
          zhiData.push(item.zhi);
          weiData.push(item.wei);
          othData.push(item.oth);
          totData.push(item.total);
        }
        option.xAxis.data = x;
      }
      myChart.setOption(option);
      window.addEventListener('resize',()=>myChart.resize())
    };

  },
};
</script>

<style lang='less' scoped>
#zh{
    box-sizing: border-box;
    // width: 100%;
    height: 330px;
}
</style>